import { rechargePeirodAccount } from '@/api/company'
import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import toNative from '@/utils/toNative'
import { getKeyToEnum, PayModeCnEnum } from '@/const/enum'
import { convertCurrency, getReceiptData, goBack } from '@/utils/util'
import type { CompanyDetailDto, CompanyInfoDto, PeriodInfoDto } from '@/api/company/types'
import { Button, message } from 'ant-design-vue'
import SuccessComponent from '../../open-products/components/SuccessComponent'
import { CustomTitle } from '@/components/custom-title/Index'

@Component
export class PeriodRecharge extends Render {
    @Prop({ default: false }) show!: boolean
    @Prop() companyDetail!: CompanyInfoDto

    title = '充值长期保'
    isSuccess = false
    successHint = ''

    @Emit('update:show')
    showChange(val: boolean) {
        return val
    }

    @Emit('refresh')
    handleRefresh() {}

    @Watch('show', { immediate: true })
    async handleWatchShow() {
        if (this.companyDetail.channelId) {
            this.rechargeFormConfig.items.receiptId.options = await getReceiptData(
                this.companyDetail.channelId
            )
        }
    }

    @Watch('rechargeFormConfig.items.payMoney.value', { deep: true })
    handleWatchPayMoney(newval: number | string) {
        this.rechargeFormConfig.items.hint.params.prefix = newval ? (
            <div class="text-red text-xl">{convertCurrency(newval)}</div>
        ) : (
            <></>
        )
        this.rechargeFormConfig.items.hint.hidden = !newval
    }

    // 充值弹框
    rechargeFormConfig = this.initRechargeFormConfig() as FormModalDto
    initRechargeFormConfig() {
        return {
            title: '',
            width: '400px',
            theme: 'light',
            show: false,
            items: {
                rechargeAmount: {
                    name: '充值金额',
                    element: 'inputNumber',
                    required: true,
                    defaultValue: 0,
                    params: {
                        min: 0
                    }
                },
                receiptId: {
                    name: '收款账户',
                    element: 'select',
                    optionsType: '',
                    required: true
                },
                payMode: {
                    name: '付款方式',
                    element: 'select',
                    optionsType: '',
                    required: true,
                    options: getKeyToEnum(PayModeCnEnum)
                },
                voucherUrl: {
                    name: '上传凭证',
                    element: 'upload',
                    type: 'text',
                    required: true,
                    params: {
                        autoUpload: false,
                        accept: '.png,.jpg,.jpeg',
                        hint: '大小限制5MB，支持png、jpeg、jpg格式文件'
                    }
                }
            },
            complete: async () => {},
            cancel: () => {},
            init: () => {
                initModelValue(this.rechargeFormConfig)
            }
        } as FormModalDto
    }

    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    async onSubmit() {
        const data = getModelValue(this.rechargeFormConfig)
        data.companyId = this.companyDetail.companyId
        if (data.voucherUrl?.length && Array.isArray(data.voucherUrl)) {
            data.voucherUrl = data.voucherUrl[0].base64
        }
        await rechargePeirodAccount(data)
        message.success('更新成功')
        this.successHint = `已成功为「${this.companyDetail.companyName}」充值了长期保账户，可在「充值审批」中查看结果`
        this.isSuccess = true
    }

    created() {
        this.basicForm = renderForm(this.rechargeFormConfig)
    }

    render() {
        return this.isSuccess ? (
            <div class="flex h-full justify-center items-center">
                <SuccessComponent text="充值成功" hint={this.successHint} />
            </div>
        ) : (
            <div class="flex flex-col gap-20px h-full">
                <div class="flex-1">
                    <CustomTitle>{this.title}</CustomTitle>
                    <div class="mt-20px">{this.basicForm.element()}</div>
                </div>
                <div class="pt-19px flex justify-center gap-20px">
                    <Button onClick={goBack}>取消</Button>
                    <Button type="primary" onClick={this.onSubmit}>
                        确认
                    </Button>
                </div>
            </div>
        )
    }
}

export default toNative<{ companyDetail: CompanyDetailDto }, {}>(PeriodRecharge)
